<template>
  <div class="demo">
    <p>children----{{ title }}</p>
    <hr />
    <button @click="changeTitleChildren">修改title---</button>
  </div>
</template>

<script>
import { setup, toRefs } from "vue";

export default {
  name: "demo",
  components: {},
  props: {
    title: {
      type: String,
      default: "default_title",
      required: true,
    },
  },

  emits: {
    changeTitle: function (val) {
      // 如果类型不对，不会报错，只会警告
      if (typeof val !== "string") {
        return false;
      }

      return true;
    },
  },

  setup(props, { emit }) {
    const changeTitleChildren = () => {
      emit("changeTitle", "true");
    };
    return {
      changeTitleChildren,
    };
  },
};
</script>

<style lang='scss' scoped>
</style>
